<template>
	<view>
		<view class="item_list">
			<view class="list" @click.stop="goteam(item.user.id)" v-for="(item,index) in itemlist" :key="index">
				<view class="list_top">
					<view class="ipone" @tap.stop="toCall(item.phone)">
						<image src="../../static/icon/tel.png" mode="widthFix"></image>
					</view>
					<image :src="item.user.avatar" mode="widthFix" v-if="user.group_id == 2"></image>
					<view class="list_title">

						<view class="title_name">
							{{item.introduce}}
						</view>
					</view>
				</view>
				<view class="list_bottom">
					<view class="bottom_list">
						<text>需求：</text>
						<view class="" v-for="(items,index) in item.troops_arr">
							{{items}}
						</view>
					</view>
					<view class="bottom_content">
						FBF-094011 {{timestampToTime(item.createtime)}} 发布
						<view class="title_dizhi flex align">
							<image src="../../static/icon/addr.png" mode="aspectFill"></image>
							<text>{{item.city}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				user: null,
				itemlist: []
			}
		},
		onLoad(option) {
			this.user = app.globalData.user
			this.getdate(option.id)
		},
		methods: {
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear();
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return M + '月' + D + '日'
				// console.log(Y + M + D + h + m + s)
			},
			getdate(id) {
				let url = 'addons/shopro/project/index'
				let data = {
					"page": 1,
					"num": 10,
					"order_by": 'new',
					"user_id": id
				}

				app.getData(url, data).then(res => {
					this.itemlist = res.data.data.data
					console.log(res.data.data.data, '111111111111111111')
					if (this.itemlist.length == 0) {
						uni.showToast({
							title: '用户不存在',
							icon: 'none'
						}, 1000)
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/myFollow/myFollow'
							})
						}, 1500)

					}
					uni.setNavigationBarTitle({
						title: this.itemlist[0].show_name + '的项目'
					});

				})
			},
			goteam(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/TeamDetails/TeamDetails?id=' + id
				})
			},
			toCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.item_list {
		padding: 20rpx;

		.list {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			.no_z {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 20rpx;

				image {
					width: 30rpx !important;
					height: 17px !important;
					margin-right: 8rpx !important;
				}
			}

			.renzheng {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: var(--baseSuccsess);
				font-size: 20rpx;

				image {
					width: 29rpx !important;
					height: 29rpx !important;
					margin-right: 8px !important;
				}
			}

			.ipone {
				position: absolute;
				right: 20rpx;
				top: 50%;
				margin-top: -60rpx;

				image {
					width: 60rpx !important;
					margin: 0 !important;
				}

			}

			.list_top {
				display: flex;
				justify-content: flex-start;

				image {
					width: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.list_title {
					.title_name {
						font-size: 28rpx;
						font-weight: bold;
					}

					.title_dizhi {
						font-size: 24rpx;
						color: #333;
						margin-top: 18rpx;
						margin-left: 20rpx;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
					}
				}
			}

			.list_bottom {
				.bottom_list {
					display: flex;
					justify-content: flex-start;
					margin: 20rpx 0;

					.bottom_lists {
						margin-right: 12rpx;
						font-size: 20rpx;
						width: 98rpx;
						text-align: center;
						padding: 4rpx 10rpx;
						background-color: #F5F6FA;
					}
				}

				.bottom_content {
					font-size: 22rpx;
					color: #333;
					font-weight: 700;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title_dizhi {
						font-size: 24rpx;
						color: #333;
						margin-top: 18rpx;
						margin-left: 20rpx;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
					}
				}
			}





		}
	}
</style>
